<template>
    <div style="width: 100%;margin-top: 20px">
        <el-row>
            <el-col :span="4" v-for="(item, index) in medias" :key="item" style="margin-right: 20px;margin-top: 10px">
                <el-card v-if="item.type!=null" :body-style="{ padding: '0px' }">
                    <template v-if="item.type==0">
                        <el-image fit="contain"  :src="getFile(item.url)" class="image" :preview-src-list="imagelist"/>
                        <div style="padding: 14px;">
                            <span class="name" :title="item.name">{{item.name}}</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ item.date }}</time>
                                <el-button type="text" class="button">上传者：{{ item.user.username }}</el-button>
                            </div>
                        </div>
                    </template>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Lessonmedia",
        props:{
            medias:{type:Array, default:()=>[]},
        },
        data(){
            return{
                imagelist:[],
            }
        },
        watch:{
            medias: function (newVal, oldVal) {
                this.init();
            },
        },
        mounted() {
            this.init();
        },
        methods:{
            init(){
                this.imagelist=[];
              this.medias.forEach(r=>{
                  if(r.type==0){
                      this.imagelist.push(this.getFile(r.url));
                  }
              })
            },
            getFile(url){
                return "onlineclass-web/upload/" + url;
            }
        }
    }
</script>

<style scoped>
    .image{
        display: block;
        margin: auto;
        margin-top: 10px;
    }
    .time {
        font-size: 13px;
        color: #999;
    }
    .name{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 220px;
        display: block;
    }
    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        height: 253px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>